<template>
  <div class="profile-page">
    <div v-if="loading" class="loading-indicator">
      正在加载数据...
    </div>
    
    <div v-else-if="error" class="error-message">
      {{ error }}
    </div>
    
    <template v-else>
      <div class="profile-header">
        <div class="header-bg"></div>
        <div class="user-info">
          <div class="avatar">
            <img :src="userInfo.avatar" :alt="userInfo.username" />
          </div>
          <div class="info-text">
            <div class="username">{{ userInfo.username }}</div>
            <div class="user-id">ID: {{ userInfo.userId }}</div>
          </div>
          <div class="setting-btn" @click="goToSettings">
            <div class="setting-icon"></div>
          </div>
        </div>
        
        <div class="user-stats">
          <div class="stat-item">
            <div class="stat-num">{{ userInfo.stats.following }}</div>
            <div class="stat-label">关注</div>
          </div>
          <div class="stat-item">
            <div class="stat-num">{{ userInfo.stats.followers }}</div>
            <div class="stat-label">粉丝</div>
          </div>
          <div class="stat-item">
            <div class="stat-num">{{ userInfo.stats.likes }}</div>
            <div class="stat-label">获赞</div>
          </div>
          <div class="stat-item">
            <div class="stat-num">{{ userInfo.stats.favorites }}</div>
            <div class="stat-label">收藏</div>
          </div>
        </div>
      </div>
      
      <div class="profile-content">
        <div class="order-section">
          <div class="section-header">
            <div class="section-title">我的订单</div>
            <div class="view-all" @click="viewAllOrders">查看全部 <span class="arrow"></span></div>
          </div>
          
          <div class="order-types">
            <div class="order-type-item" v-for="type in orderTypes" :key="type.id" @click="goToOrderType(type.id)">
              <div class="order-icon" :class="type.iconClass"></div>
              <div class="order-label">{{ type.name }}</div>
              <div class="badge" v-if="type.count > 0">{{ type.count }}</div>
            </div>
          </div>
        </div>
        
        <div class="wallet-section">
          <div class="section-header">
            <div class="section-title">我的钱包</div>
            <div class="view-all" @click="viewWallet">查看 <span class="arrow"></span></div>
          </div>
          
          <div class="wallet-items">
                         <div class="wallet-item" v-for="item in walletItems" :key="item.id" @click="goToWalletItem(item.id)">
              <div class="wallet-amount">{{ item.amount }}</div>
              <div class="wallet-label">{{ item.name }}</div>
            </div>
          </div>
        </div>
        
        <div class="tools-section">
          <div class="section-header">
            <div class="section-title">常用工具</div>
          </div>
          
          <div class="tool-grid">
                         <div class="tool-item" v-for="tool in tools" :key="tool.id" @click="useTool(tool.id)">
              <div class="tool-icon" :class="tool.iconClass"></div>
              <div class="tool-name">{{ tool.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { orderAPI, afterSalesAPI } from '../utils/api';

const router = useRouter();
const loading = ref(false);
const error = ref('');

// 用户信息 - 实际项目中应该从用户认证服务获取
const userInfo = ref({
  username: '用户名123456',
  userId: '9876543',
  avatar: 'https://via.placeholder.com/80x80?text=User',
  stats: {
    following: 8,
    followers: 128,
    likes: 36,
    favorites: 20
  }
});

// 订单类型和数量
const orderTypes = ref([
  { id: 'pending', name: '待付款', iconClass: 'pending-payment', count: 0 },
  { id: 'shipping', name: '待发货', iconClass: 'to-be-shipped', count: 0 },
  { id: 'receiving', name: '待收货', iconClass: 'to-be-received', count: 0 },
  { id: 'review', name: '待评价', iconClass: 'to-be-reviewed', count: 0 },
  { id: 'afterSale', name: '售后', iconClass: 'after-sale', count: 0 }
]);

// 钱包项目
const walletItems = ref([
  { id: 'balance', name: '余额', amount: '¥368.50' },
  { id: 'coupon', name: '优惠券', amount: '3张' },
  { id: 'points', name: '积分', amount: '1280' },
  { id: 'gift', name: '礼品卡', amount: '1张' }
]);

// 工具项目
const tools = ref([
  { id: 'address', name: '收货地址', iconClass: 'address' },
  { id: 'customer', name: '客服中心', iconClass: 'customer' },
  { id: 'favorite', name: '我的收藏', iconClass: 'favorite' },
  { id: 'history', name: '浏览历史', iconClass: 'history' },
  { id: 'feedback', name: '意见反馈', iconClass: 'feedback' },
  { id: 'help', name: '帮助中心', iconClass: 'help' },
  { id: 'invite', name: '邀请好友', iconClass: 'invite' },
  { id: 'member', name: '会员中心', iconClass: 'member' }
]);

// 获取订单信息
const fetchOrders = async () => {
  loading.value = true;
  error.value = '';
  
  try {
    // 获取所有订单
    const response = await orderAPI.getAll();
    const orders = response.data || [];
    
    // 根据订单状态更新订单数量
    if (orders.length > 0) {
      // 重置计数
      orderTypes.value.forEach(type => type.count = 0);
      
      // 更新各状态订单数量
      orders.forEach((order: any) => {
        switch (order.status) {
          case 'pending':
            orderTypes.value[0].count++;
            break;
          case 'shipping':
            orderTypes.value[1].count++;
            break;
          case 'receiving':
            orderTypes.value[2].count++;
            break;
          case 'completed':
            if (!order.reviewed) {
              orderTypes.value[3].count++;
            }
            break;
        }
      });
      
      // 获取售后服务数量
      try {
        const afterSalesResponse = await afterSalesAPI.getAll();
        const afterSales = afterSalesResponse.data || [];
        orderTypes.value[4].count = afterSales.length;
      } catch (err) {
        console.error('获取售后数据失败:', err);
      }
    } else {
      // 没有真实数据时使用模拟数据
      orderTypes.value = [
        { id: 'pending', name: '待付款', iconClass: 'pending-payment', count: 2 },
        { id: 'shipping', name: '待发货', iconClass: 'to-be-shipped', count: 0 },
        { id: 'receiving', name: '待收货', iconClass: 'to-be-received', count: 1 },
        { id: 'review', name: '待评价', iconClass: 'to-be-reviewed', count: 3 },
        { id: 'afterSale', name: '售后', iconClass: 'after-sale', count: 0 }
      ];
    }
  } catch (err: any) {
    console.error('获取订单数据失败:', err);
    error.value = err.message || '获取订单信息失败';
    
    // 使用模拟数据
    orderTypes.value = [
      { id: 'pending', name: '待付款', iconClass: 'pending-payment', count: 2 },
      { id: 'shipping', name: '待发货', iconClass: 'to-be-shipped', count: 0 },
      { id: 'receiving', name: '待收货', iconClass: 'to-be-received', count: 1 },
      { id: 'review', name: '待评价', iconClass: 'to-be-reviewed', count: 3 },
      { id: 'afterSale', name: '售后', iconClass: 'after-sale', count: 0 }
    ];
  } finally {
    loading.value = false;
  }
};

// 获取用户信息 - 实际项目中应该从用户认证服务获取
const fetchUserInfo = async () => {
  // 模拟从API获取用户信息
  // 实际项目中应该调用用户服务API
  
  // 如果需要，更新用户信息
  userInfo.value = {
    username: '用户名123456',
    userId: '9876543',
    avatar: 'https://via.placeholder.com/80x80?text=User',
    stats: {
      following: 8,
      followers: 128,
      likes: 36,
      favorites: 20
    }
  };
};

// 方法
const goToSettings = () => {
  console.log('去设置页面');
  // router.push('/settings');
};

const viewAllOrders = () => {
  console.log('查看全部订单');
  // router.push('/orders');
};

const goToOrderType = (typeId: string) => {
  console.log('去订单类型页面', typeId);
  // router.push(`/orders/${typeId}`);
};

const viewWallet = () => {
  console.log('查看钱包');
  // router.push('/wallet');
};

const goToWalletItem = (itemId: string) => {
  console.log('去钱包项目页面', itemId);
  // router.push(`/wallet/${itemId}`);
};

const useTool = (toolId: string) => {
  console.log('使用工具', toolId);
  // 根据工具ID进行不同的路由跳转
  // router.push(`/${toolId}`);
};

// 初始化数据
onMounted(() => {
  fetchUserInfo();
  fetchOrders();
});
</script>

<style scoped>
.loading-indicator {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error-message {
  text-align: center;
  padding: 20px;
  color: #ff0000;
  background-color: #ffeeee;
  margin: 10px;
  border-radius: 4px;
}

.profile-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 50px);
  background-color: #f5f5f5;
}

.profile-header {
  position: relative;
  padding-top: 20px;
  padding-bottom: 15px;
  background-color: #fff;
  margin-bottom: 10px;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(135deg, #ff9068, #ff6b35);
  z-index: 0;
  border-bottom-left-radius: 30% 20px;
  border-bottom-right-radius: 30% 20px;
}

.user-info {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 15px;
  z-index: 1;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #fff;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-text {
  margin-left: 15px;
  flex: 1;
}

.username {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-id {
  font-size: 12px;
  color: #fff;
  opacity: 0.8;
}

.setting-btn {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.setting-icon {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
  background-size: contain;
}

.user-stats {
  display: flex;
  margin-top: 15px;
  padding: 15px 0;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  flex: 1;
  text-align: center;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background-color: #f0f0f0;
}

.stat-num {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}

.profile-content {
  flex: 1;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

.view-all {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  transform: rotate(45deg);
  margin-left: 5px;
}

.order-section, .wallet-section, .tools-section {
  background-color: #fff;
  margin-bottom: 10px;
}

.order-types {
  display: flex;
  padding: 15px 0;
}

.order-type-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.order-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.pending-payment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff6b35' d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
}

.to-be-shipped {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff6b35' d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}

.to-be-received {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff6b35' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.to-be-reviewed {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff6b35' d='M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z'/%3E%3C/svg%3E");
}

.after-sale {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff6b35' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
}

.order-label {
  font-size: 12px;
  color: #666;
}

.badge {
  position: absolute;
  top: -5px;
  right: 25%;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background-color: #ff6b35;
  border-radius: 8px;
  color: #fff;
  font-size: 10px;
  padding: 0 4px;
}

.wallet-items {
  display: flex;
  padding: 15px 0;
}

.wallet-item {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.wallet-amount {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b35;
  margin-bottom: 5px;
}

.wallet-label {
  font-size: 12px;
  color: #666;
}

.tool-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.tool-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
}

.tool-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.address {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.customer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z'/%3E%3C/svg%3E");
}

.favorite {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3z'/%3E%3C/svg%3E");
}

.history {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/%3E%3C/svg%3E");
}

.feedback {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z'/%3E%3C/svg%3E");
}

.help {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'/%3E%3C/svg%3E");
}

.invite {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.member {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}

.tool-name {
  font-size: 12px;
  color: #666;
}
</style> 